<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ZUI，一个简单吸引人的前端框架。">
  <meta name="author" content="Zentao">

  <title>ZUI - 开源HTML5跨屏框架</title>

  <link href="../css/zui.min.css" rel="stylesheet">
  <link href="../css/example.css" rel="stylesheet">

  <!--[if lt IE 9]>
  <script src="../../assets/html5shiv.js"></script>
  <script src="../../assets/respond.js"></script>
  <![endif]-->
</head>

<body>
  <article>
    <h1>Datatable</h1>
    <div class="segment">
      <div id="dtFromData"></div>
      <table class="table table-bordered table-striped" id="datatable">
        <thead>
          <tr>
            <th class='text-center' data-col-class='text-center'>Lorem.</th>
            <th class='text-primary'>Saepe?</th>
            <th style="color: #999">Necessitatibus.</th>
            <th>Minus.</th>
            <th class='flex-col' data-width='100'>Veritatis?</th>
            <th class='flex-col' data-width='300'>Nulla.</th>
            <th class='flex-col' data-width='200'>Hic.</th>
            <th>Voluptatem.</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Lorem.</td>
            <td>Obcaecati.</td>
            <td>Corporis.</td>
            <td>Ipsam.</td>
            <td>Voluptatibus!</td>
            <td>Consequatur.</td>
            <td>Accusamus!</td>
            <td>Obcaecati.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Sit!</td>
            <td>Sit.</td>
            <td>Iure.</td>
            <td>Minima!</td>
            <td>Eveniet!</td>
            <td>Qui.</td>
            <td>Non.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Nam!</td>
            <td>Sequi.</td>
            <td>Laborum?</td>
            <td>Deleniti.</td>
            <td>Amet.</td>
            <td>Eligendi.</td>
            <td>Praesentium!</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Quibusdam?</td>
            <td>Sapiente!</td>
            <td>Nihil!</td>
            <td>Doloribus.</td>
            <td>Aliquid.</td>
            <td>Magnam.</td>
            <td>Consectetur?</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Suscipit.</td>
            <td>Nemo.</td>
            <td>Quasi.</td>
            <td>Cupiditate.</td>
            <td>Reprehenderit!</td>
            <td>Aspernatur.</td>
            <td>Quos.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Vel!</td>
            <td>Voluptatibus.</td>
            <td>Reprehenderit.</td>
            <td>Fugit.</td>
            <td>Vero!</td>
            <td>Sed.</td>
            <td>Molestias.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Vitae.</td>
            <td>Blanditiis.</td>
            <td>Perspiciatis.</td>
            <td>Officiis.</td>
            <td>Doloremque.</td>
            <td>Molestiae?</td>
            <td>Vitae.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Quod.</td>
            <td>Nostrum.</td>
            <td>Optio.</td>
            <td>Minus.</td>
            <td>Molestiae!</td>
            <td>Animi.</td>
            <td>Dolorum?</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Reiciendis.</td>
            <td>Delectus.</td>
            <td>Beatae.</td>
            <td>Amet!</td>
            <td>Qui!</td>
            <td>Rem!</td>
            <td>Reprehenderit.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Consequuntur.</td>
            <td>Cum.</td>
            <td>Fuga?</td>
            <td>Tempore.</td>
            <td>Fugit.</td>
            <td>Nemo.</td>
            <td>Dicta!</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Illum?</td>
            <td>Totam.</td>
            <td>Quia!</td>
            <td>Fuga!</td>
            <td>Nemo.</td>
            <td>Nesciunt?</td>
            <td>Itaque.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Modi?</td>
            <td>Autem.</td>
            <td>Dignissimos.</td>
            <td>Atque.</td>
            <td>Consequatur.</td>
            <td>Fugit.</td>
            <td>Maxime.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Harum.</td>
            <td>At!</td>
            <td>Fugiat!</td>
            <td>Impedit.</td>
            <td>Similique.</td>
            <td>Quia?</td>
            <td>Incidunt.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Iusto.</td>
            <td>Eligendi.</td>
            <td>Animi.</td>
            <td>Facilis.</td>
            <td>Consectetur?</td>
            <td>Accusamus!</td>
            <td>Et!</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Sequi.</td>
            <td>Fugiat.</td>
            <td>Itaque.</td>
            <td>Iure.</td>
            <td>Eligendi?</td>
            <td>Rem?</td>
            <td>Voluptatem.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Voluptates!</td>
            <td>Asperiores.</td>
            <td>Sit.</td>
            <td>Nemo!</td>
            <td>Suscipit.</td>
            <td>Eligendi!</td>
            <td>Maiores.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Illo.</td>
            <td>Reiciendis.</td>
            <td>Dolorem.</td>
            <td>Porro!</td>
            <td>Eos.</td>
            <td>Itaque.</td>
            <td>Aliquam!</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Omnis.</td>
            <td>Expedita.</td>
            <td>Tempora.</td>
            <td>At.</td>
            <td>Officiis.</td>
            <td>Minus!</td>
            <td>Sint?</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Consectetur!</td>
            <td>Saepe.</td>
            <td>Dolores!</td>
            <td>Illum!</td>
            <td>Libero!</td>
            <td>Atque!</td>
            <td>Repudiandae.</td>
          </tr>
          <tr>
            <td>Lorem.</td>
            <td>Vitae.</td>
            <td>Molestiae.</td>
            <td>Magni.</td>
            <td>Necessitatibus.</td>
            <td>Magnam.</td>
            <td>Ullam!</td>
            <td>Dolor.</td>
          </tr>
        </tbody>
      </table>
    </div>
  </article>

<script src="../../assets/jquery.js"></script>
<script src="../../dist/js/zui.js"></script>
<script src="../js/example.js"></script>

<script>
$(function()
{
    $('#datatable').datatable({fixedHeaderOffset: 41});
    $('#dtFromData').datatable
    ({
        customizable: true, checkable: true, sortable: true,
        sort: function(event)
        {
        },
        fixedHeaderOffset: 41,
        data:
        {
            cols:
            [
                {sort: 'down', width: 80,     text: '#',      type: 'number', flex: false, colClass: 'text-center', css: 'color: #444'},
                {width: 'auto', text: 'Name',   type: 'string', flex: false},
                {width: 100,    text: 'Mood and taste',  type: 'string', flex: false},
                {width: 150,    text: 'Date',   type: 'date',   flex: true, cssClass: 'text-center'},
                {sort: false, width: 250,    text: 'Desc',   type: 'string', flex: true, cssClass: 'text-center'},
                {width: 80,     text: 'Pri',    type: 'number', flex: true, colClass: 'text-center'},
                {width: 'auto', text: 'Status', type: 'string', flex: true, colClass: 'text-center'}
            ],
            rows:
            [
                {checked: false, data: ['1', '<a href="###">Catouse</a>', 'happy', '2014-08-07', 'null is good', '1', 'OK']},
                {checked: true,  data: ['2', '<a data="fd" href="###">Shine</a>',  'angry', '2014-08-06', 'god is girl,god is girlgod is girl,god is girl,god is girl,god is girl,god is girl',  '2', 'OK']},
                {checked: false, data: ['3', '<a href="###">Minus</a>', 'Veritatis', '2014-08-07', 'Nulla', '1', 'Ipsam']},
                {cssClass:'danger', checked: false, data: ['4', '<a href="###">Consequatur</a>', 'Accusamus', '2014-08-07', 'Obcaecati', '1', 'Qui']},
                {checked: false, data: ['5', '<a href="###">Lorem</a>', 'Quos', '2014-08-07', 'Molestiae', '1', 'Qui']},
                {checked: false, data: ['6', '<a href="###">Suscipit</a>', 'Vitae', '2014-08-07', 'Suscipit', '1', 'AE']},
                {checked: false, data: ['7', '<a href="###">Vel</a>', 'Blanditiis', '2014-08-07', 'Aspernatur', '1', 'Sed']},
                {checked: false, data: ['8', '<a href="###">Vero</a>', 'Officiis', '2014-08-07', 'Quos', '1', 'Vel']}
            ]
        }
    }).on('sort.zui.datatable', function(event)
    {
    });
});
</script>
</body>
</html>
